import { useRef, useEffect } from 'react'

import { Chart } from '@antv/g2'
export default function LineGraph() {
	const canvasRef = useRef()
	useEffect(() => {
		const data = [
			{ genre: 'Sports', sold: 275 },
			{ genre: 'Strategy', sold: 115 },
			{ genre: 'Action', sold: 120 },
			{ genre: 'Shooter', sold: 350 },
			{ genre: 'Other', sold: 150 }
		]

		// Step 1: 创建 Chart 对象
		const chart = new Chart({
			container: 'c1', // 指定图表容器 ID
			width: 600, // 指定图表宽度
			height: 300 // 指定图表高度
		})

		// Step 2: 载入数据源
		chart.data(data)

		// Step 3: 创建图形语法，绘制柱状图
		chart.interval().position('genre*sold')

		// Step 4: 渲染图表
		chart.render()
	})
	return <div ref={canvasRef} id='c1'></div>
}
